/**
* @Description: WoShop商城
* @Author: Parker
* @Copyright: 武汉一一零七科技有限公司©版权所有
* @Link: www.wo-shop.net
* @Contact: QQ:2487937004
*/
<template>
  <view class="homeBody" v-if="pageShow" :style="{background: diyData.config ? diyData.config.backgroundColor : '#fff'}">
    <div v-if="isDiyOpen">
      <render-widget :ref="item.component" v-for="item in getComponentList" :key="item.id" :item="item" :msgCount="imcountnumtips" :location="location">
      </render-widget>
    </div>
    <div v-else>
      <u-navbar title-color="#fff" back-icon-color="#ffffff" :background="background" :is-back="false" :border-bottom="false">

        <view class="slot-wrap">
          <view class="search-wrap">
            <u-search v-model="keyword" :placeholder="$t('请输入商品关键词')" :disabled="true" @click="$u.route('pagesC/search/searchAll')" :show-action="false" height="62" :action-style="{color: '#fff'}">
            </u-search>
          </view>
        </view>

        <!-- <view class="navbar-right">
          <view class="message-box right-item">
            <u-icon name="chat" size="50" @click="$u.route('/pagesB/message/message')"></u-icon>
            <view class="imcount" v-if="imcountnumtips != 0">{{imcountnumtips}}</view>
            <u-badge v-if="messageBadgeShow" count="18" size="mini" :offset="[-15, -15]"></u-badge>
          </view>
          <view class="dot-box right-item">
					<u-icon name="coupon" size="48" @click="$u.route('/pagesB/coupon/getCoupon')"></u-icon>
					<u-badge v-if="couponBadgeShow" size="mini" bgColor="#fff" :is-dot="true" :offset="[-6, -6]"></u-badge>
				</view>
        </view> -->
      </u-navbar>
		<view class="nav">
        <u-sticky :offset-top="offsetTop" h5-nav-height="44">
        </u-sticky>
        <view class="gap-wrap">
          <view class="gap"></view>
        </view>
      </view>
      <view class="head-box">
        <!-- 轮播区 -->
        <view class="home-header">
          <view class="swipe-banner">
            <u-swiper :list="bannerList" name='ad_pic' height="380" bg-color="transparent" @click="bannerClick" border-radius="18"></u-swiper>
          </view>
        </view>

        <!-- 分类入口区 -->
        <!-- <view class="sortWrap">
          <view v-for="(item,index) in sortList" :key="index" class="box" @click="goLink(item)">
            <u-image :border-radius="300" :src="item.image_path" height="90" width="90" shape="squire"></u-image>
            <p class="u-m-t-10 u-m-b-20 u-font-xs  name">{{item.menu_name}}</p>
          </view>
        </view> -->
      </view>
      <u-notice-bar mode="vertical" :list="list" v-if="false"></u-notice-bar>

      <!--橱窗区 -->
      <view class="shopwindowWrap">
       <!-- <shop-window :cardInfo="cardInfo.seckill" :type="'seckill'" class="shopWindow seckillShopWindow">
          <template v-slot:cutdown>
            <view class="seckill-slot-wrap">
              <view class="seckill-badge" :style="{background:cardInfo.seckill.tag_bg_color}">
                {{seckillTime.hour}}{{$t('点场')}}
              </view>
              <view class="seckill-badge-countdown">
                <u-count-down :timestamp="seckillTime.countdown" separator-color="#ff4444" bg-color="transparent" separator-size="24" font-size="24" color="#ff4444"></u-count-down>
              </view>
            </view>
          </template>
        </shop-window> -->
        <!-- <shop-window :cardInfo="cardInfo.live" v-if="cardInfo.live.is_open" :type="'live'" :thumbName="'cover'" class="shopWindow"></shop-window> -->
        <shop-window :cardInfo="cardInfo.new_goods" :type="'new_goods'" class="shopWindow newShopWindow"></shop-window>
        <!-- <shop-window :cardInfo="cardInfo.assemble" :type="'assemble'" class="shopWindow assembleShopWindow"> -->
        </shop-window>
      </view>
      <!--橱窗区-->
     <!-- <view class="homeActivity">
        <u-image v-if="capsule" :src="capsule.ad_pic" mode="aspetFill" width="738" height="210" @click="capsuleClick"></u-image>
      </view> -->

      <!--店铺街-->
      <!-- <view class="shopMall" v-if="showMutipleShopper">
        <h3 class="tit">{{$t('店铺街')}}</h3>
        <view class="shopCardWrap">
          <view v-for="(item,index) in shopList" :key="index" @click="$u.route({url:'/pagesC/shop/storeDetails',params: {
					shop_id: item.id}})">
            <shopCard :info="item"></shopCard>
          </view>
        </view>
      </view> -->

      <!-- 商品列表 -->
      <view class="cardTab">
        <h3 class="cardTitTab" @click="goodsShopTypeFunction(1)">{{$t('猜你喜欢')}}
          <view class="cardTitbadgeTab">{{$t('精选好货')}}</view>
          <view class="cardBorder" v-if="goodsShopType == 1"></view>
        </h3>
       <!-- <h3 class="cardTitTab" @click="goodsShopTypeFunction(2)">{{$t('店铺街')}}
          <view class="cardTitbadgeTab">{{$t('精选店铺')}}</view>
          <view class="cardBorder" v-if="goodsShopType == 2"></view>
        </h3> -->
      </view>

      <u-waterfall v-model="goodsList" class="u-m-10" ref="goodsWaterfall" >
        <template v-slot:left="{leftList}" >
          <view v-for="(item,index) in leftList" :key="index">
            <goodsCard :info="item" class="goodsCard" v-if="item.is_activity != 2"></goodsCard>
          </view>
        </template>
        <template v-slot:right="{rightList}" >
          <view v-for="(item,index) in rightList" :key="index">
            <goodsCard :info="item" class="goodsCard" v-if="item.is_activity != 2"></goodsCard>
          </view>
        </template>
      </u-waterfall>

     <!-- <view class="the-content" v-else>
        <view class="shop-list" v-for="(time,index) in goodsShopList" :key="index">
          <view class="the-title u-flex u-col-center u-row-between">
            <view class="u-flex">
              <u-avatar :src="time.logo?time.logo : imgSTATICURL+'images/logo.png'"></u-avatar>
              <view class="u-m-l-20">
                <view class="shopName">{{time.shop_name}}</view>
                <view>
                  <text>{{$t('好评率')}}:{{time.praise_lv}}% </text>
                  <text>{{time.deal_num}}</text> {{$t('人已抢')}}
                </view>
              </view>
            </view>

            <view class="location">
              <view class="location-distance">{{time.distance}}km</view>
              <u-tag :text="$t('进店逛逛')" mode="light" size="mini" shape="circle" type="warning" @click="$u.route({url:'/pagesC/shop/storeDetails',params:{shop_id:time.id}})" />
            </view>
          </view>
          <view class="itemsWrap u-flex">
            <view class="items" v-for="(shopitem,index2) in time.goodres" :key="index2" @click="$u.route({url:'/pagesC/goods/goodsDetails',params:{id:shopitem.id}})">
              <u-image width="100%" height="240" border-radius="18" :src="shopitem.thumb_url" style="margin-bottom:8upx" />
              <view class="u-line-1">{{shopitem.goods_name}}</view>
              <view class="money">￥{{shopitem.zs_price}}</view>
            </view>
          </view>
        </view>
		</view> -->
    </div>

    <u-back-top :scroll-top="scrollTop"></u-back-top>
    <isLoginTips />
    <popupContact></popupContact>
    <!-- <loadMore :loadingType="loadingType"></loadMore> -->
  </view>

</template>

<script>
	import shopWindow from "@/components/shopWindow" //橱窗组件
	import shopCard from '@/components/shopCard' //店铺组件
	import goodsCard from '@/components/goodsCard'
	import isLoginTips from "@/components/isLoginTips";
	import popupContact from "@/components/popup-contact";
	import RenderWidget from '@/components/render-widget'
	import diyApi from '@/api/diyApi';
	import {mapGetters } from 'vuex';
	let page = 1
	let shopPage =1

	export default {

		data() {
			return {
				diyData: {},
				pageShow: false,
				scrollTop: 0,
				sortList: [],
				isLogin: 0, //判断是否登陆
				swiper_height: '150px',
				headerPosition: 'fixed',
				speakerIconImg: '../../static/images/img/redian.png',
				swiperItems: [],
				goodsList: [],
				timeBanner: '',
				goodsinfo: {},
				loadingType: 0,
				seckillTime: {
					hour:0,
					coundown:0
				},
				xm: 0,
				isShow: [],
				cardInfo: {
					seckill: {},
					live: {},
					assemble: {},
					new_goods: {}
				},
				isScrollTop: false,
				shopList: [],
				homeBg: {},
				bgColor: '#fa3f3f',
				imgStaticUrl: '',
				bannerList: [],
				country: '',
				navList: [],
				background: {
					'background-image': 'linear-gradient(45deg, #FA2E1B, #FF523C)'
					// background: '#de3947',
				},
				stickyTop: 175,
				navBarHeight: 88,
				activeItemStyle: {
					fontSize: '34rpx'
				},
				backIconName: 'grid-fill',
				keyword: '',
				offsetTop: 0,
				messageBadgeShow: false,
				couponBadgeShow: false,
				capsule: {}, // 胶囊图


				goodsShopType:1,
				goodsShopList:[], // 店铺列表
				imgSTATICURL: this.STATICURL,
				location:{
					citycode:"",
					name:"",
					pinyin:"",
					lng:"",
					lat:"",
				},
				imcountnumtips:0,
				timeclear:null,
				userId:'',
			}
		},

		components: {
			shopWindow,
			shopCard,
			goodsCard,
			isLoginTips,
			popupContact,
			RenderWidget
		},

		onShareAppMessage(res) {
			if (res.from === 'button') { // 来自页面内分享按钮
				console.log(res.target)
			}
			return {
				title: this.$t('WoShop商城·好物分享'),
				path: '/pages/tabBar/home?shareUserId='+this.$store.state.userId,
			}
		},
		computed:{
			...mapGetters([
				'showMutipleShopper'
			]),
			getComponentList() {
				const { pages = [] } = this.diyData;
				const { componentList = [] } = pages[0] || {};
				return componentList
			},

			isDiyOpen () {
				return (this.diyData.config && this.diyData.config.isOpen) === '1'
			}
		},

		onLoad(option) {
			if(option.shareUserId){
				this.$store.commit('setshareUserId', option.shareUserId)
			}
			
			this.initProject()
			this.getPosition();

			// 兼容微信小程序写法
			this.imgStaticUrl = this.STATICURL
			page = 1
			this.loadingType = 0
			this.goodsList = []
			this.isInfoShow = false
			this.stickyTop = 1;


			// #ifdef MP-WEIXIN
			//获取胶囊按钮的布局位置信息，坐标信息以屏幕左上角为原点
			let custom = wx.getMenuButtonBoundingClientRect()
			//导航栏高度 = 状态栏到胶囊的间距（胶囊距上距离-状态栏高度） * 2 + 胶囊高度 + 状态栏高度。
			// this.stickyTop = custom.bottom + custom.top - uni.getSystemInfoSync().statusBarHeight
			// #endif
			
			
		},

		onShow() {
			if (uni.getStorageSync('token')) {
				this.$store.dispatch('contentnum')
				this.asyncMessageImCount()
				this.LocationMessageImCount()
			} else {
				this.isLogin = 0
			}
			
			this.setOffestTop();
			uni.getStorageSync("location") && (this.location = uni.getStorageSync("location"));
		},
		onHide(){
			if (uni.getStorageSync('token')) {
				console.log("yincang home")
				clearInterval(this.timeclear)
			} else {
				this.isLogin = 0
			}
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
			if (e.scrollTop > 10) {
				this.isScrollTop = true
			} else {
				this.isScrollTop = false
			}

		},
		onShareTimeline(res) {
			if (res.from === 'button') { // 来自页面内分享按钮
				console.log(res.target)
			}
			return {
				title: '曜宇生活',
				path: '/pages/tabBar/Home?shareUserId='+this.$store.state.userId
			}
		},

    //下拉刷新
    onPullDownRefresh(){
			if (!this.isDiyOpen) {
				this.getBannerList()
				this.getCapsule()
				this.getIndexShowcase()
				this.getRecommendShops()
				this.getGoodsList()
				this.gethomeInfo()
				this.getMenuList()
				this.getIndexNavList()
			} else {
				this.initProject()
			}

      uni.stopPullDownRefresh()
    },

		methods: {
			initProject() {
				this.$loading()
				this.$http.getDiyConfig().then(res => {
					console.log(res)
					if (res.status == 200){
						if (res.data.is_diylayout == 1) {
							diyApi.getDiyData({ project_id: 'woshop_diy_demo' }).then((res) => {
								const { status, data = {} } = res;
								if (status === 200) {
									const { diy_data } = data;
									const _l = diy_data && JSON.parse(diy_data);
									this.diyData = _l;

									if (_l.config.isOpen !== '1') {
										this.getIndexShowcase()
										this.getRecommendShops()
										this.getGoodsList()
										this.gethomeInfo()
										this.getMenuList()
										this.getIndexNavList()
										this.getBannerList()
										this.getCapsule()
									}

									this.pageShow = true
								}
							});
						} else {
							this.getIndexShowcase()
							this.getRecommendShops()
							this.getGoodsList()
							this.gethomeInfo()
							this.getMenuList()
							this.getIndexNavList()
							this.getBannerList()
							this.getCapsule()
							this.pageShow = true
						}
					}
				})
			},
			asyncMessageImCount(){
				this.$http.messageImCount().then(res => {
					if(res.status == 200){
						this.imcountnumtips = res.data.imcountnumtips
						uni.setStorageSync('imcountnum',res.data.imcountnum)
						uni.setStorageSync('imcountnumtips', this.imcountnumtips)
						this.$store.commit('setUserId', res.data.user_id)
					}
				})
			},

			LocationMessageImCount(){
				this.timeclear = setInterval(()=>{
					this.imcountnumtips = uni.getStorageSync("imcountnumtips")
				}, 1000);
			},

			//获取经纬度
			getPosition(){
				var that = this;
				uni.getLocation({
					type: 'gcj02',
					geocode:true,//设置该参数为true可直接获取经纬度及城市信息
					success: function (res) {
						if(typeof(res.address) != "undefined"){
							let location = {
								citycode:res.address.cityCode,
								name:res.address.city,
								pinyin:"",
								lng:res.longitude,
								lat:res.latitude,
							}
							uni.setStorageSync('location', location)
							that.location = uni.getStorageSync("location");
						}else{
							that.$http.geocodeRegeo({lng:res.longitude,lat:res.latitude}).then(res => {
								if(res.status == 200){
									let location = res.data
									uni.setStorageSync('location', location)
									that.location = uni.getStorageSync("location");
								}
							})
						}

					},
					fail: function () {
						let location = {
							citycode:"",
							name:"全国",
							pinyin:"",
							lng:"",
							lat:"",
						}
						uni.setStorageSync('location', location)
					}
				});
			},

			// 适配吸顶tab高度
			setOffestTop() {
				// #ifndef H5
				let systemInfo = uni.getSystemInfoSync()
				let topPx = systemInfo.statusBarHeight + 44 // 顶部状态栏+沉浸式自定义顶部导航
				this.offsetTop = topPx / (uni.upx2px(topPx) / topPx) // px转rpx
				// #endif

			},
			changeNav(index) {
				let id = this.navList[index].id
				this.$u.route('/pagesC/goods/categoryGoods', {
					id: id
				});
			},
			getBannerList() {
				const data = {
					tag: 'mobile_index_banner'
				}
				this.$http.getAdByTag(data).then(res => {
					if(res.status == 200){
						this.bannerList = res.data
					}
				})
			},
			bannerClick(index){
				let ad = this.bannerList[index];
				if(ad.ad_url != ''){
					this.$u.route({url:ad.ad_url,type:ad.ad_url_type})
				}
			},
			getCapsule() {
				const data = {
					tag: 'mobile_index_capsule'
				}
				this.$http.getAdByTag(data).then(res => {
					if(res.status == 200){
						this.capsule = res.data[0]
					}
				})
			},
			capsuleClick(){
				if(this.capsule.ad_url != ''){
					this.$u.route({url:this.capsule.ad_url,type:this.capsule.ad_url_type})
				}
			},
			getIndexNavList() {
				this.$http.getIndexNavList().then(res => {
					if (res.status === 200) {
						this.navList = res.data
					}
				})
			},
			getMenuList() {
				this.$http.getMenuList().then(res => {
					if(res.status===200){
						const {data:{menu_list=[]}} = res
						menu_list.map((res,i)=>{
							if(res.id===8 && !this.showMutipleShopper){
								return
							}
							return res
						})
						this.sortList = menu_list
					}
				})
			},
			signin() {
				if (uni.getStorageSync('token')) {
					this.getnav('/pagesB/my/signin')
				} else {
					this.$navigateTo('/pagesB/login/login')
				}
			},
			goLink(item) {
				this.$u.route({
					url: item.menu_url,
					type: item.menu_url_type
				})

			},
			timeuptime() {
				page = 1
				this.loadingType = 0
				this.goodsList = []
				this.getGoodsList()
				this.gethomeInfo()
			},
			getIndexShowcase() {
				this.$http.getIndexShowcase().then(res => {
					this.$nextTick(() => {
						this.cardInfo = res.data
					})
				})
			},
			getRecommendShops() {
				this.$http.getRecommendShops().then(res => {
					this.shopList = res.data

				})
			},
			getGoodsList() {
				this.$http.getGoodsList({
					page: page
				}).then(res => {
					if (res.status == 200) {
						if (res.data.length == 0) {
							this.loadingType = 2
							return false
						}
						this.goodsList = [...this.goodsList, ...res.data]
						this.loadingType = 0
					}
				})
			},

			gethomeInfo() {
				this.$http.gethomeInfo().then(res => {
					if (res.status == 200) {
						const date = new Date(Number(res.data.hdinfos.hdtime) * 1000)
						this.seckillTime.hour = date.getHours() > 9 ? date.getHours() : '0' + date.getHours()
						this.seckillTime.countdown = Number(res.data.hdinfos.end_time) - Number(res.data.hdinfos.dqtime)
					}
				})
			},

			getTab(src) {
				uni.switchTab({
					url: src
				})
			},

			getsing() {
				if (!uni.getStorageSync('token')) {
					this.getnav('/pagesB/login/login?')
				} else {
					this.getnav('/pagesB/personalSon')
				}
			},

			goodsShopTypeFunction(goodsShopType){
				this.goodsShopType = goodsShopType
				if(goodsShopType == 1){
					page=1
					this.goodsList = []
					this.getGoodsList()
				}else{
					shopPage=1
					this.goodsShopList = []
					this.getShopList();
				}
			},


			getShopList() {
			    this.$http.getShopList({
			        page: shopPage,
					longitude:this.location.lng,
					latitude:this.location.lat
			    }).then(res => {
					if (res.status == 200) {
						if (res.data.length == 0) {
							this.loadingType = 2
							return false
						}
						this.goodsShopList = [...this.goodsShopList, ...res.data.data]
						this.loadingType = 0
					}
			    })
			},

		},


		onReachBottom() {
			if (this.isDiyOpen) {
				this.$refs.McGoods[0].getList()
				return
			}

			if (this.loadingType == 1 || this.loadingType == 2) {
				return false
			}
			this.loadingType = 1
			page++
			shopPage++
			if(this.goodsShopType == 1){
				this.getGoodsList()
			}else{
				this.getShopList()
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import '~uview-ui/index.scss';

	.homeBody {
		// #ifdef H5
		padding-bottom: 60px!important;
		// #endif
		min-height: 100%;
		background: #fff;
	}

	.cardTab{
    margin:10rpx 16rpx;
    color:#444;
    display:flex;
    align-items:center;
	text-align: center;
	background-image: linear-gradient(180deg, #fceded, #fff 20%);
	padding:10rpx 0;
	border-radius: 20rpx;
	.cardTitTab{
		margin-right:40rpx;
		width:160rpx;
		.cardTitbadgeTab{
			font-size: 25rpx;
			padding:5rpx 0;
			color: #999;
		}
		.cardBorder{
			margin:0 auto;
			width:80rpx;
			height:6rpx;
			background: #f00;
		}
	}
}
	.index_class /deep/ .u-tabs,
	.index_class /deep/.nav-list,
	.nav {
		background-image: linear-gradient(45deg, #FA2E1B, #FF523C)!important;
	}

	.gap-wrap{
		width: 750rpx;
		height: 25rpx;
		background-color: linear-gradient(45deg, #FA2E1B, #FF523C);
		.gap{
			background-color: #fff;
			width: 100%;
			height: 100%;
			border-radius: 20rpx 20rpx 0 0;
		}
	}

	.home-header {
		position: relative;
		width: 100%;

		.swipe-banner {
			width: 700rpx;
			margin: 0rpx 25rpx 30rpx;
		}

	}

	.sortWrap {
		padding: 0;
		display: flex;
		flex-wrap: wrap;

		.name {
			color: #242323;
			margin-top: 10rpx;
			font-size: 24rpx;
			font-weight: 400;
		}

		.box {
			flex-basis: 20%;
			flex-shrink: 0;
			text-align: center;
			@include flexbox($jc:center, $dr:column);
		}
	}

	.shopwindowWrap {
		display: flex;
		flex-wrap: wrap;
		border-radius: 16rpx;
		justify-content: space-between;
		padding: 0rpx;
		margin: 16rpx;
		overflow: hidden;
		background-color: #ffffff;
	}

	.shopWindow {
		width: 100% !important;
	}

	.bu_class {
		margin-top: 25rpx;
		padding: 0 10rpx;
	}

	.shopMall {
		background: #fff;
		padding: 20rpx;
		margin: 15rpx;
		border-radius: 12rpx;

		.shopCardWrap {
			margin-top: 8rpx;
			display: flex;
			overflow-x: auto;
		}

		.tit {
			color: #444;
		}
	}

	.seckillShopWindow {
		border-radius: 16rpx 0 0 0;
		overflow: hidden;

		/deep/.u-image__image {
			width: 80% !important;
		}
	}
	.newShopWindow {
		border-radius: 16rpx 0 0 0;
		overflow: hidden;
	}

	.assembleShopWindow {
		border-radius: 0 16rpx 0 0;
		overflow: hidden;
	}

	.homeActivity {
		padding: 20rpx 6rpx;
	}

	.navbar-right {
		margin-right: 24rpx;
		display: flex;
	}

	.search-wrap {
		margin: 0 20rpx;
		flex: 1;
	}

	.right-item {
		margin: 0 12rpx;
		position: relative;
		color: #ffffff;
		display: flex;
	}

	.left-item {
		margin-left:12rpx;
		position: relative;
		color: #ffffff;
		display: flex;
		line-height:88rpx;
	}
	.left-item-view{
		width:100rpx;
		white-space:nowrap;
		overflow:hidden;
		text-overflow:ellipsis;
	}

	.slot-wrap {
		display: flex;
		align-items: center;
		flex: 1;
	}

	.seckill-badge {
		color: #fff;
		font-size: 24rpx;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		height: 32rpx;
		border-radius: 6rpx;
		padding: 2rpx;
		border-top-right-radius: 0rpx;
		border-bottom-right-radius: 0rpx;
	}
	.seckill-badge-countdown{
		background-color: rgba(249,161,161,0.2);
		color: #fff;
		font-size: 24rpx;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		height: 32rpx;
		border-radius: 6rpx;
		padding: 2rpx;
		border-top-left-radius: 0rpx;
		border-bottom-left-radius: 0rpx;

	}

	/deep/.u-countdown .u-countdown-colon{
		padding: 0;
	}
	/deep/.u-countdown .u-countdown-item{
		padding: 0;
	}
	/deep/.u-mode-center-box{
		background-color: transparent !important;
	}
	.seckill-slot-wrap{
		display: flex;
	}



	.shop-search {
	    position: absolute;
	    top: 50%;
	    transform: translateY(-50%);
	    right: 20upx;
	    height: 60upx;
	    width: 620upx;
	    background-color: #EEEFEF;
	    border-radius: 30upx;
	    display: flex;
	    align-items: center;
	    justify-content: space-between;
	    .iconfont {
	        height: 60upx;
	        line-height: 60upx;
	        width: 60upx;
	        text-align: center;
	        color: #999;
	    }
	    .bus-tap {
	        height: 60upx;
	        line-height: 60upx;
	        width: 100upx;
	        text-align: center;
	        color: #333333;
	    }
	    input {
	        flex: 1;
	        color: #999;
	        text-align: left;
	    }
	}
	.itemsWrap{
	  margin-top: 20upx;
	  overflow-x: scroll;
	  .items{

	  width:33%;
	    margin-right: 20upx;
	  }
	}
	.shopName{
	  font-size: 30upx;
	}
	.shop-list{
	  background-color: #fff;
	  margin: 15upx 20upx ;
	  border-radius: 10px;
	  padding: 25upx 20upx;
	}
	.location{
		text-align:right;
	}
	.location-distance{
		height:60rpx;
	}
	.imcount{
		width:40rpx;
		height:40rpx;
		background:#ffb2b2;
		position:absolute;
		display:inline-block;
		bottom: 22rpx;
		right: -20rpx;
		border-radius: 30rpx;
		line-height:40rpx;
		font-size:8rpx;
		text-align: center;
	}
</style>
